<!-- 
  @name: 首页
  @date: 2020.4.1
 -->
<template>
	<view class="content">
		<!-- 顶部区域 -->
		<view class="topview fixed_top">
			<view class="u-f-jsb search-box">
				<view class="search">
					<view class="icon"></view>
					<input
						class="int"
						confirm-type="search"
						placeholder="输入出厂编码/设备开发名称"
						placeholder-class="phcolor"
						v-model.trim="keyword"
						@confirm="search"
					/>
				</view>
				<view @click="scan">
					<image class="icon-scan" src="/static/images/scan2.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="btnview">
				<view
					class="select_btn"
					:class="stuSel ? 'not_sl' : ''"
					@tap="
						stuSel = false;
						typeSel = !typeSel;
					"
				>
					<view class="_text">{{ macTypeText }}</view>
					<view class="_icon" :class="typeSel ? 'up' : 'down'"></view>
				</view>
				<view
					class="select_btn"
					:class="typeSel ? 'not_sl' : ''"
					@tap="
						typeSel = false;
						stuSel = !stuSel;
					"
				>
					<view class="_text">{{ macStatusText }}</view>
					<view class="_icon" :class="stuSel ? 'up' : 'down'"></view>
				</view>
				<view class="total">
					<text>设备数量</text>
					<text class="num">{{ total }}</text>
				</view>
				<view style="flex: 1;"></view>
				<!-- <view class="recd" @tap="$navigateTo('/pages/service/index')">
					<view class="icon"></view>
					<view class="tip">售后记录</view>
				</view> -->
			</view>
		</view>

		<!-- 筛选 -->
		<view
			class="_popup"
			v-show="typeSel || stuSel"
			@tap="
				typeSel = false;
				stuSel = false;
			"
		></view>
		<!-- 类型筛选 -->
		<view class="select_popup" v-show="typeSel">
			<view
				class="_btn"
				v-for="(item, index) in typeList"
				:key="index"
				:class="macType === item.dictValue ? 'sl' : ''"
				@tap="chooseType(item, index)"
			>
				{{ item.dictName }}
			</view>
		</view>
		<!-- 状态筛选 -->
		<view class="select_popup" v-show="stuSel">
			<view
				class="_btn"
				v-for="(item, index) in stuList"
				:key="index"
				:class="macStatus === item.code ? 'sl' : ''"
				@tap="chooseStu(item, index)"
			>
				{{ item.text }}
			</view>
		</view>

		<!-- 列表 -->
		<view class="listview">
			<view
				class="item"
				v-for="(item, index) in lists"
				:key="item.machineId"
				@tap="$navigateTo('/pages/device/index?macCode=' + item.macCode)"
			>
				<view class="top">
					<view class="left">{{ item.macCode }}</view>
					<view class="right c1" v-if="item.macStatus === 0">待调试</view>
					<view class="right c2" v-else-if="item.macStatus === 1">已入库</view>
					<view class="right c3" v-else>已出售</view>
				</view>
				<view class="btm">
					<text class="left">{{ item.macType }}</text>
					<text class="right">{{ item.macTime }}</text>
				</view>
			</view>
			<!-- 底部加载提示 -->
			<btm-load></btm-load>
		</view>

		<!-- 底部添加 -->
		<view class="btmview">
			<view class="btn" @tap="showCodePopup = true">二维码</view>
			<view class="add" @tap="$navigateTo('/pages/device/edit')">
				<view class="icon"></view>
			</view>
			<view class="btn" @tap="$navigateTo('/pages/service/index')">售后记录</view>
		</view>

		<view class="back-top" @tap="backTop" v-show="isShowBackTop">
			<image src="/static/images/icon-backtop.png" mode="widthFix"></image>
		</view>
		<!-- 生成二维码弹出 -->
		<u-popup
			v-model="showCodePopup"
			mode="center"
			:closeable="true"
			border-radius="10"
			:mask-close-able="false"
			close-icon-size="36"
		>
			<view class="popup-container">
				<view class="tip" v-show="showTip">
					一次最多可生成
					<text style="margin: 0 6rpx;font-size: 30rpx;color: red;">20</text>
					张二维码
				</view>
				<view class="input-item">
					<input
						type="number"
						v-model="codeNum"
						@focus="showTip = true"
						@blur="showTip = false"
						placeholder="输入二维码数量"
					/>
				</view>
				<view class="input-item">
					<input type="text" v-model="email" placeholder="输入接收邮箱号" />
				</view>
				<button type="default" :disabled="sending" @tap="confirmGenerate">确认</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			total: 0, //总数量
			lists: [], //列表
			page: 1, //页码
			keyword: '', //关键字
			typeSel: false, //型号筛选
			macType: -1, //选中的型号
			macTypeText: '设备型号', //型号名
			typeList: [], //型号列表
			stuSel: false, //状态筛选
			macStatus: -1, //选中的状态
			macStatusText: '设备状态', //状态名
			stuList: [
				{ code: -1, text: '全部' },
				{ code: 0, text: '待调试' },
				{ code: 1, text: '已入库' },
				{ code: 2, text: '已出售' },
				{ code: 3, text: '故障' }
			], //状态列表
			userToken: '', //用户token
			showCodePopup: false, // 显示添加二维码弹窗
			codeNum: '', // 二维码数量
			email: '', // 接收邮箱，
			sending: false,
			showTip: false,
			isShowBackTop: false
		};
	},
	computed: {
		//是否前往登录页
		goLogin() {
			return this.$store.state.goLogin;
		}
	},
	onLoad() {
		this.getTypeList();
		uni.$on('device_addDevice', this.search);
		uni.$on('device_delDevice', this.delMac);
		uni.$on('device_macStatusChe', this.macStatusChe);
		this.userToken = uni.getStorageSync(this.$tmp.TOKEN_INFO);
		if (this.userToken) {
			this.reToken();
		} else {
			uni.showModal({
				content: '本软件仅限于公司内部员工使用，请使用公司分配的账号登录。',
				confirmText: '去登录',
				cancelText: '再看看',
				success: rs => {
					if (rs.confirm) {
						this.$store.commit('goLogin', true);
						this.$navigateTo('/pages/login/index');
					}
				}
			});
		}
	},
	onShow() {
		if (this.$store.state.reLogin) {
			this.$store.commit('hasLogin');
			if (this.goLogin) {
				this.pullDown();
				this.$store.commit('goLogin', false);
			}
		}
		if (getApp().globalData.extraData) {
			const originalDeviceCode = getApp().globalData.extraData.originalDeviceCode || '';
			getApp().globalData.extraData = '';
			this.queryMacCode(originalDeviceCode);
		}
		// this.originalDeviceCode = '159954917915354ZHK';
		// this.queryMacCode('159954917915354ZHK');
	},
	onUnload() {
		uni.$off('device_addDevice', this.search);
		uni.$off('device_delDevice', this.delMac);
		uni.$off('device_macStatusChe', this.macStatusChe);
	},
	onReachBottom() {
		this.$store.commit('btmLoad', true);
		this.getList();
	},
	onPullDownRefresh() {
		this.pullDown();
	},
	onPageScroll(e) {
		this.isShowBackTop = e.scrollTop > 500;
	},
	methods: {
		// 查询二维码编号
		async queryMacCode(originalDeviceCode) {
			const res = await this.$http({
				url: this.$api.siteUrl + 'getmaccodebyoriginaldevicecode',
				data: {
					originalDeviceCode
				}
			});
			console.log('res', res);
			if (res.macCode) {
				const macDetail = await this.getInfo(res.macCode);
				console.log('macDetail', macDetail);
				// 机器关闭且为工厂模式时允许调试机器
				if (macDetail.macStatus === 3 && macDetail.deviceMod === 1) {
					if (macDetail.isOnline === 0) {
						this.$showToast('设备不在线，请开机后再进行调试！');
						return;
					} else {
						this.$navigateTo(
							`/pages/device/scan?macCode=${res.macCode}&ureaPrice=${macDetail.ureaPrice}&units=${macDetail.units}&repair=1`
						);
					}
				} else {
					this.$showToast('只允许扫码调式已故障设备！');
				}
			}
		},
		scan() {
			uni.navigateToMiniProgram({
				appId: 'wx931075a419a0491b',
				path: 'pages/scan/scan?id=123',
				extraData: {
					data1: 'test'
				},
				envVersion: process.env.NODE_ENV === 'development' ? 'trial' : 'release',
				success(res) {
					// 打开成功
				}
			});
		},
		//获取信息
		getInfo(code) {
			return this.$http({
				url: this.$api.factoryUrl + 'getdevicedetail',
				data: {
					macCode: code
				}
			});
		},
		backTop() {
			uni.pageScrollTo({
				scrollTop: 0
			});
		},
		// 生成二维码
		confirmGenerate() {
			let { codeNum, email } = this;
			if (codeNum == '' || codeNum == 0) {
				return this.$showToast('请填写生成数量');
			}
			if (codeNum > 20) {
				return this.$showToast('生成数量不得超过20张');
			}
			if (!this.$u.test.email(email)) {
				return this.$showToast('请填写正确的邮箱号');
			}
			uni.showLoading({
				title: '生成中'
			});
			this.sending = true;
			this.$http({
				url: this.$api.factoryUrl + 'downloadqrcode',
				data: {
					emailAddress: this.email,
					number: this.codeNum
				},
				loading: 0
			})
				.then(res => {
					uni.hideLoading();
					this.showCodePopup = false;
					this.codeNum = '';
					this.email = '';
					this.sending = false;
					return this.$showToast('已发送成功，请登录邮箱查看');
				})
				.fail(() => {
					this.sending = false;
				});
		},
		//刷新token
		reToken() {
			uni.login({
				provider: 'weixin',
				success: rs => {
					this.$http({
						url: this.$api.userUrl + 'wxloginbytype',
						data: {
							action: 0,
							code: rs.code
						}
					}).then(res => {
						this.$store.commit('login', res); //保存token，将登录状态调整为“已登录”
						this.$socket.dispatch('check'); //通过检查websocket来重新连接
						this.$store.commit('hasLogin');
						this.pullDown();
					});
				}
			});
		},
		//下拉刷新
		pullDown() {
			this.keyword = '';
			this.search();
		},
		//监听删除
		delMac(e) {
			let index = this.lists.findIndex(item => item.machineId === e.machineId);
			if (index > -1) this.lists.splice(index, 1);
		},
		//搜索
		search() {
			this.macType = -1;
			this.macTypeText = '设备型号';
			this.macStatus = -1;
			this.macStatusText = '设备状态';
			this.hasSelect();
		},
		//筛选后
		hasSelect() {
			this.lists = [];
			this.page = 1;
			this.getList();
		},
		//监听机器状态改变(主要是从调试改为入库)
		macStatusChe(e) {
			let index = this.lists.findIndex(item => item.macCode === e.macCode);
			this.lists[index].macStatus = 1;
		},
		//选择状态
		chooseStu(item, index) {
			if (this.macStatus !== item.code) {
				let text = item.code === -1 ? '设备状态' : item.text;
				text = text.length > 5 ? text.substr(0, 4) + '...' : text;
				this.macStatus = item.code;
				this.macStatusText = text;
				this.stuSel = false;
				this.hasSelect();
			}
		},
		//选择型号
		chooseType(item, index) {
			if (this.macType !== item.dictValue) {
				let text = item.dictValue === -1 ? '设备型号' : item.dictName;
				text = text.length > 5 ? text.substr(0, 4) + '...' : text;
				this.macType = item.dictValue;
				this.macTypeText = text;
				this.typeSel = false;
				this.hasSelect();
			}
		},
		//获取型号
		getTypeList() {
			this.$http({
				url: this.$api.userUrl + 'getdictlist',
				data: {
					dictKey: 'MacType'
				}
			}).then(res => {
				this.typeList = [
					{
						dictName: '全部',
						dictValue: -1
					}
				];
				this.typeList = this.typeList.concat(res);
			});
		},
		//获取列表
		getList() {
			this.$http({
				url: this.$api.factoryUrl + 'getdevicepage',
				data: {
					macType: this.macType < 0 ? '' : this.macType,
					macStatus: this.macStatus < 0 ? '' : this.macStatus,
					keyword: this.keyword,
					page: this.page,
					rows: this.$tmp.ROWS_RET
				},
				loading: this.page > 1 ? 0 : ''
			}).then(res => {
				this.total = res.deviceNum;
				let arr = res.lstDevices;
				if (arr && arr.length > 0) {
					this.lists = this.lists.concat(arr);
					this.page += 1;
				}
			});
		}
	}
};
</script>

<style lang="scss">
.back-top {
	position: fixed;
	right: 20rpx;
	bottom: 15%;
	background-color: #ffffff;
	border-radius: 50%;
	overflow: hidden;
	width: 80rpx;
	height: 80rpx;

	image {
		width: 80rpx;
		height: 80rpx;
	}
}
/* 顶部区域 */
.topview {
	width: 750rpx;
	height: 200rpx;
	background-color: $color-primary;

	.search-box {
		padding: 0px 30rpx;
		margin-top: 20rpx;
	}
	.icon-scan {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		image {
			width: 60rpx;
			height: 60rpx;
		}
	}
	.search {
		flex: 1;
		height: 66rpx;
		padding: 0 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		border-radius: 34rpx;
		background-color: $color-white;
		margin-right: 30rpx;
		.icon {
			width: 33rpx;
			height: 33rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16EYFOAae8EAAAEp7Figxs920.png');
		}
		.int {
			flex: 1;
			margin-left: 20rpx;
		}
	}
	.btnview {
		width: 100%;
		margin-top: 30rpx;
		padding: 0 30rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		.select_btn {
			margin-right: 20rpx;
		}
	}
	.total {
		width: 300rpx;
		display: flex;
		align-items: center;
		margin-left: 10rpx;
		color: $color-white;
		font-size: 22rpx;
		justify-content: center;
		.num {
			margin-left: 15rpx;
			font-size: 36rpx;
			font-family: $font-family-num;
		}
	}
	.recd {
		display: flex;
		flex-direction: row;
		align-items: center;
		.icon {
			width: 27rpx;
			height: 28rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16EWXKAVlLPAAACbTAI3hY762.png');
		}
		.tip {
			font-size: 22rpx;
			color: $color-white;
			margin-left: 7rpx;
		}
	}
}

/* 筛选 */
._popup,
.select_popup {
	top: 200rpx;
}

/* 列表 */
.listview {
	width: 750rpx;
	margin-top: 200rpx;
	margin-bottom: 165rpx;
	padding: 0 20rpx;
	.item {
		width: 100%;
		padding: 26rpx 30rpx;
		margin-top: $spacing-col;
		background-color: $color-white;
		border-radius: $border-radius-bm;
		display: flex;
		flex-direction: column;
		justify-content: center;
		.top,
		.btm {
			width: 100%;
			display: flex;
			flex-direction: row;
			align-items: center;
		}
		.top {
			.left {
				flex: 1;
				font-size: 30rpx;
				font-family: $font-family-num;
			}
			.right {
				width: 90rpx;
				height: 38rpx;
				line-height: 38rpx;
				text-align: center;
				font-size: 22rpx;
				color: $color-white;
				border-radius: 8rpx;
			}
			.right.c1 {
				background-color: #6798fe;
			}
			.right.c2 {
				background-color: $color-primary;
			}
			.right.c3 {
				color: $color-grey;
				background-color: $color-bg;
			}
		}
		.btm {
			margin-top: 30rpx;
			font-size: 24rpx;
			.left {
				flex: 1;
			}
			.right {
				color: $color-grey;
				font-family: $font-family-num;
			}
		}
	}
}
/* 底部添加 */
.btmview {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: $z-index-fixed;
	width: 750rpx;
	height: 150rpx;
	background-color: $color-white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: 30rpx;
	box-shadow: 0 0 14rpx 1rpx #d3d3d3;
	padding: 0 60rpx;

	.add {
		position: absolute;
		top: -70rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 180rpx;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 20rpx solid $color-white;
		background: linear-gradient(90deg, #869edb, #7684bc);
		border-radius: $border-radius-circle;
		box-shadow: 0 0 10rpx 2rpx #e8e8e8;
		.icon {
			width: 44rpx;
			height: 44rpx;
			background-image: url('http://img.etubang.com/group1/M00/00/42/rBCky16FT6qAYFunAAAA1aImuXc418.png');
		}
	}
	.tip {
		width: 100%;
		text-align: center;
		font-size: 30rpx;
		color: $color-primary;
		margin-top: 85rpx;
	}

	.btn {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 30rpx;
	}
}

::v-deep .popup-container {
	width: 600rpx;
	height: 570rpx;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 30rpx 50rpx 60rpx 50rpx;
	box-sizing: border-box;

	.input-item {
		height: 88rpx;
		background-color: #f6f6f6;
		display: flex;
		justify-content: center;
		align-content: center;
		border-radius: 12rpx;
		margin-bottom: 30rpx;

		input {
			height: 88rpx;
			text-align: center;
		}
	}
	button {
		height: 80rpx;
		line-height: 80rpx;
		margin: 0;
		background-color: #7780c2;
		color: #ffffff;
		margin-top: 20rpx;
	}
	.tip {
		color: #666;
		font-size: 26rpx;
		line-height: 2;
	}
}
</style>
